<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid 布局</title>
  <style>
    .container{
      /* 将容器设置为grid(网格)布局 */
      display: grid;
      /* 设置网格中每一列的宽度 */
      grid-template-columns: 50px 100px 150px;
      /* 设置网格中每一行的高度 */
      grid-template-rows: 150px 100px 50px;
      /* 设置横向单元格的间距(列间距) */
      grid-column-gap: 2px;
      /* 设置纵向单元格的间距(行间距) */
      grid-row-gap: 5px;
      /* grid-column-gap和grid-row-gap已废弃 */
      /* 使用column-gap和row-gap替代 */
      column-gap: 2px;
      row-gap: 5px;
      /* 定义每个区域的名称，如果不想设置名称，可将对应位置设置为'.' */
      grid-template-areas:  'a b c'
                            'd e f'
                            'g h i';
      /* 设置元素的排列顺序，默认为row，即从左至右。设置为column即为从上至下 */
      grid-auto-flow: column;
    }

    .second-container{
      display: grid;
      grid-template-columns: 100px 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      /* grid-auto-flow: row;实际上是grid布局的默认值 */
      grid-auto-flow: row;
      /* row dense 表示先行后列，有空填空，只要放得下，默认先补满一行上的内容 */
      grid-auto-flow: row dense;
      /* column dense 表示先列后行   */
      grid-auto-flow: column dense;
      /* 
      justify-items 表示水平方向的布局方式，可以取的值为start、end、center、stretch（默认）
      align-items 表示垂直方向的布局方式，取值同justify-items
       */
      justify-items: stretch;
      align-items: stretch;
      /* 
      place-items 为justify-items和align-items的简写
      即place-items: <align-items> <justify-items>;
       */
      place-items: stretch center;
      /* place-items只写一个值表示第二个值与第一个值相等 */
      place-items: stretch;
      /* 对应的，都有justify-self、align-self、place-self */
    }

    .third-container{
      width: 800px;
      display: grid;
      grid-template-columns: 200px 100px 200px;
      /* repeat表示重复，第一个值为重复次数，第二个值为重复模式 */
      /* repeat第一个值可以设置为auto-fill，表示自动填充，使一行容纳尽可能多的单元格 */
      grid-template-rows: repeat(3, 100px);
      border: 1px solid #000;
    }

    .fourth-container{
      display: grid;
      /* 
      区域8和区域9处于网格外部，在网格的第4行和第5行。
      默认情况下，浏览器自动生成多余的网格来放置项目，根据网格内容的大小决定新增网格的列宽和行高
      */
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(3, 100px);
      /* 自定义自动生成的多余网格的行高为50px */
      grid-auto-rows: 50px;
    }

    hr{
      margin: 20px 0;
    }

    /* .container start */
    .item {
      font-size: 2em;
      text-align: center;
    }

    .item-1 {
      background-color: #ef342a;
    }

    .item-2 {
      background-color: #f68f26;
    }

    .item-3 {
      background-color: #4ba946;
    }

    .item-4 {
      background-color: #0376c2;
    }

    .item-5 {
      background-color: #c077af;
    }

    .item-6 {
      background-color: #f8d29d;
    }

    .item-7 {
      background-color: #b5a87f;
    }

    .item-8 {
      background-color: #d0e4a9;
    }

    .item-9 {
      background-color: #4dc7ec;
    }
    /* .container end */

    /* .second-container start */
    .second-container .item {
      font-size: 4em;
      text-align: center;
    }

    .second-container .item-1 {
      /* 设置当前区域的网格线的起始位置 */
      grid-column-start: 1;
      /* 设置当前区域的网格线的终点位置 */
      grid-column-end: 3;  
    }

    .second-container .item-2 {
      grid-column-start: 1;
      grid-column-end: 3; 
    }
    /* .second-container end */

    /* .fourth-container start */
    .fourth-container .item-8 {
      /* 行开始的网格线，对应的end不写默认为start+1 */
      /* 网格线设置除了指定第几个网格线 */
      /* 还可以指定网格线的名字 */
      /* 例：grid-row-start: a-start; */
      /* 还可以使用span关键字，表示跨越多少个网格 */
      /* 例：grid-row-start: span 2;  */
      grid-row-start: 4;
      grid-column-start: 2;
      /* grid-row-start & grid-row-end可缩写为grid-row。同理grid-column */
      grid-column: 2 / 3;
      grid-row: 4 / 5;
      /* 使用span关键字 */
      grid-column: 2 / span 1;
      grid-row: 4 / span 1;
    }

    .fourth-container .item-9 {
      grid-row-start: 5;
      grid-column-start: 3;
    }
    /* .fourth-container end */
  </style>
</head>
<body>
  <div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
  </div>
  <hr>
  <div class="second-container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
  </div>
  <hr>
  <div class="third-container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
  </div>
  <hr>
  <div class="fourth-container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
  </div>
</body>
</html>